<!--
 * @Description:
 * @Author: zhangweigang
 * @Date: 2021-04-17 11:07:52
 * @LastEditTime: 2021-05-05 11:00:45
 * @LastEditors: zhangweigang
-->
<template>
  <div class="main">
    <h3>系统数据统计</h3>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
  </div>
</template>

<script>
let echarts = require('echarts')
export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 图表1
      let oneChart = echarts.init(document.getElementById('one'))
      oneChart.setOption({
        title: {
          text: '统计书籍分类的上传数据量',
          textStyle: {
            color: '#FFF'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisPointer: {
            type: 'shadow'
          },
          data: ['古典文学', '现代文学', '科学技术', '时尚阅读', '侦探推理', '传记纪实', '前端开发'],
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          axisLabel: {
            interval: 0
          }
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#FFF'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#fff'
            }
          }
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            barWidth: '35',
            data: [5, 20, 36, 10, 10, 20, 12],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#69fefe'
                  },
                  {
                    offset: 1,
                    color: '#d79df2'
                  }
                ]),
                barBorderRadius: [4, 4, 2, 2]
              }
            }
          }
        ]
      })
      // 图表2
      let twoChart = echarts.init(document.getElementById('two'))
      let a = 0,
        b = 1,
        c = 2
      twoChart.setOption({
        title: {
          text: '共享和非共享书籍占比',
          textStyle: {
            color: '#FFF'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10',
          type: 'scroll',
          orient: 'horizontal',
          x: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '书籍共享',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 88, name: '非共享书籍' },
              { value: 40, name: '共享书籍' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
      // 图表3
      let threeChart = echarts.init(document.getElementById('three'))
      threeChart.setOption({
        title: {
          text: '已审核和未审核占比',
          textStyle: {
            color: '#FFF'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '10',
          type: 'scroll',
          orient: 'horizontal',
          x: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '书籍审核',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 50, name: '已审核' },
              { value: 80, name: '未审核' }
            ],
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = ['#38f6f8', '#ADFF2F']
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  overflow: hidden;
  clear: both;
  height: 100%;
  width: 100%;
  background: url('../../assets/img/bg_2.jpg');
  background-size: cover;
  h3 {
    color: white;
    text-align: center;
    margin-bottom: 30px;
  }
}
#one,
#two,
#three {
  width: 550px;
  height: 350px;
  float: left;
  padding: 0 0 0 50px;
}
#three {
  margin-top: 30px;
}
</style>
